3 min read

On the heels of our announcement of free static deployments聽earlier today, we are excited to introduce a beta release of the upcoming聽Next.js聽3.0, featuring聽next export, dynamic components and various bugfixes.

Next.js allows you to write React applications with server-rendering, automatic code-splitting, built-in component CSS with one command. To get started, populate聽pages/my-route.js聽directory with a file that exports a component:

Install it with聽npm install next react react-dom, run聽next聽and navigate to聽http://localhost:3000/my-route. That's it! To learn more, read the聽5-minute README聽or check out our聽2.0 announcement blogpost.

Until today, you would run聽next聽to develop,聽next build聽to compile the production app and聽next start聽to serve it.

We are now introducing a new subcommand:聽next export. It will seamlessly build your Next.js app as a聽standalone static website. This means you can聽deploy it聽without a server at all!

The exported app supports almost every feature of聽Next.js, including dynamic URLs, prefetching, preloading and the new dynamic imports.

Let's walk through an example.

Simply聽develop聽your app as you normally do with Next.js. Then create a聽custom Next.js config聽like this one:

This is a simple map of paths to pages, with optional query parameters to supply to聽getInitialProps. When you are ready to go to production, simply run:

For that, you may need to add a script to聽package.json聽like this:

And run it at once with:

This will result in a static version of your app in the聽out聽directory. This also is customizable! Run聽next export -h聽to see all the available options.

Now you can deploy it! Simply聽cd聽to the聽out聽directory and run following command to deploy your app to聽聽instantly聽for free.

With聽next export, we build an HTML version of your app. At that time, we will automatically execute the聽getInitialProps聽functions of your pages and store the results.

This means you can only use聽pathname,聽query聽and聽asPath聽fields of the聽context聽object passed to聽getInitialProps. You cannot use聽req聽or聽res聽fields, because those require a server runtime.

Basically, you will not be able to render content dynamic in the server as we prebuilt HTML files. If you need that, you need run your app with聽next start.

Next.js 3.0 comes with聽TC39 dynamic import聽support. This means聽import()聽is generally available throughout your codebase to fetch modules dynamically as a聽Promise.

With a higher-order component helper聽next/dynamic, you can now take those promises and turn them into real components!

In this case, the聽DynamicComponent1聽or聽DynamicComponent2聽will not be included in the聽main app bundle聽included with the page. Instead, they will be lazily downloaded on the client side.

Since we are actually rendering聽DynamicComponent1, when you server-render or export the relevant聽聽will be included and loaded in parallel with the rest of the scripts.

As eloquently explained by聽James Kyle, dynamic loadable components give you more granularity for code splitting.

Consider, for example, the use case of a long chat thread with different message types. If you simply rely on static聽import聽declarations for code splitting, you will end up loading message types on the client that are not required in many cases!

Next.js supports server side rendering for dynamic imports. For an example, in the above example, we will load聽DynamicComponent1聽on the server side and render it synchronously.

This is a unique feature of Next.js which makes Dynamic Imports incredibly powerful.

Concretely, you get all the benefits of dynamic imports, but you avoid showing the clients blank pages, flickering or loading spinners.

Next.js 3.0 is聽completely backwards-compatible聽and ready for experimentation and pre-production use. The APIs might change slightly but we don't expect to alter them in significant ways.

Run npm install next@beta.

Check out the up-to-date documentation.

Have a look at this example app.

Join the Vercel Community #next channel to ask any questions or get in touch with us!